<template>
    <page-layout>
        <a-card>
            <a-form-model>
                <a-row :gutter="24">
                    <a-form-model-item label="下拉多选" style="width: 300px">
                        <z-multi-select-tag
                            v-model="queryParam.selectValue"
                            :options="dictOptions1"
                            placeholder="请做出你的选择">
                        </z-multi-select-tag>
                    {{ queryParam.selectValue }}
                    </a-form-model-item>

                    <a-form-model-item label="checkbox">
                        <z-multi-select-tag
                            v-model="queryParam.checkboxValue"
                            :options="dictOptions1"
                            type="checkbox">
                        </z-multi-select-tag>
                        {{ queryParam.checkboxValue }}
                    </a-form-model-item>
                    <a-form-model-item label="下拉搜索" style="width: 300px">
                        <z-search-select-tag
                            placeholder="请做出你的选择"
                            v-model="queryParam.selectValue"
                            :dictOptions="dictOptions1">
                        </z-search-select-tag>
                        {{ queryParam.selectValue }}
                    </a-form-model-item>
                    <a-form-model-item label="字典下拉" style="width: 300px">
                        <z-dict-select-tag  v-model="queryParam.sex" placeholder="请输入用户性别"  dictCode="sex"/>
                    </a-form-model-item>
                    <a-form-model-item label="用户选择" style="width: 300px">
                      <ZSelectMultiUser v-model="queryParam.user"/>
                    </a-form-model-item>
                    <a-col>
                        <a-form-model-item label="ZModal弹窗">
                            <a-button style="margin-right: 8px;" @click="()=>modal.visible=true">点击弹出ZModal</a-button>
                            <span style="margin-right: 8px;">全屏化：<a-switch v-model="modal.fullscreen"/></span>
                            <span style="margin-right: 8px;">允许切换全屏：<a-switch v-model="modal.switchFullscreen"/></span>
                        </a-form-model-item>
                        <z-modal
                            :visible.sync="modal.visible"
                            :width="1200"
                            :title="modal.title"
                            :fullscreen.sync="modal.fullscreen"
                            :switchFullscreen="modal.switchFullscreen"
                        >
                            <template v-for="(i,k) of 30">
                                <p :key="k">这是主体内容，高度是自适应的</p>
                            </template>
                        </z-modal>
                    </a-col>
                </a-row>
            </a-form-model >
        </a-card>
    </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag.vue'
import ZMultiSelectTag from '@/components/dict/ZMultiSelectTag'
import ZSearchSelectTag from '@/components/dict/ZSearchSelectTag'
import ZSelectMultiUser from '@/components/zzbiz/ZSelectMultiUser'
import Criteria from '@/utils/criteria'
import Crud from '@/utils/crud'
import { OPERATOR } from '@/store/mutation-types'
export default {
  components: {
    ZDictSelectTag,
    ZMultiSelectTag,
    ZSearchSelectTag,
    ZSelectMultiUser,
    PageLayout
  },
  data() {
    return {
      queryParam: {},
      dictOptions1: [
        { value: '1', text: '男' },
        { value: '2', text: '女' }
      ],
      modal: {
        title: '这里是标题',
        visible: false,
        fullscreen: true,
        switchFullscreen: true
      }
    }
  },
  mounted() {
    // 查询构造器
    // 使用方法一
    const a = new Criteria()
    a.addCriterion('resourceType', OPERATOR.EQ, 'ELEMENT')
      .or()
      .addCriterion('username', OPERATOR.EQ, 'admin')
      .and()
      .addCriterion('username', OPERATOR.EQ, 'admin')
      .addCriterion('username', OPERATOR.EQ, 'admin')
      .end()
      .addCriterion('username', OPERATOR.EQ, 'admin1')
      .end()
      .addOrder('createTime', true)
      .addOrder('updateTime', true)

    // 使用方法二
    const queryParam = {
      username: 'admin',
      sex: '17'
    }
    const b = new Criteria()
    b.addCriterions(queryParam, OPERATOR.LIKE)
    // console.log(b)
    const data1 = [
      { id: 1, b: '1.1', list: [{ id: '1-2', d: 1, list: [1, 2, 3] }, { id: '1-1', d: 1 }] },
      { id: 2, b: 2, list: [{ id: '2-2', d: 2 }] },
      { id: 3, b: 3, list: [{ id: '4-2', d: 6 }] }
    ]

    const data2 = [
      { id: 1, b: 1, list: [{ id: '1-2', d: 1, list: [1, 2, 3] }] },
      { id: 2, b: 2, list: [{ id: '2-2', d: 2 }] },
      { id: 3, b: 3, list: [{ id: '3-2', d: 3 }] },
      { id: 4, b: 4, list: [{ id: '4-2', d: 6 }] }
    ]
    // const formData = new Crud(data2)
    // const aaa = formData.getCrudType(data1)
    // console.log(aaa)
    // const obj1 = { id: 1, b: '1.1', list: [{ id: '1-2', d: 1, list: [1, 2, 3] }, { id: '1-1', d: 1 }] }
    // const obj2 = { id: 1, b: 1, list: [{ id: '1-2', d: 1, list: [1, 2, 3] }] }
    // const formData = new Crud(obj2)
    // const bbb = formData.getCrudType(obj1)
    // console.log(bbb)
    const obj1 = { id: 1, b: '1.1', list: { id: '1-1', d: 1, list: [1, 2] }}
    const obj2 = { id: 1, b: 1, list: { id: '1-2', d: 1, list: [1, 2, 3] }}
    const formData = new Crud(obj2)
    const bbb = formData.getCrudType(obj1)
    console.log(bbb)
  }
}
</script>

<style>

</style>
